<template>
  <!-- 不需要根标签 -->
  <h1 class="title">App...</h1>
  <p>hello vue3</p>
  <!-- 
    v-model给组件绑定功能发送变化，给DOM元素绑定还是一样的功能
    
    vue2 v-model
      value
      input事件

    vue3 v-model
      modelValue
      update:modelValue事件
   -->
  <Child v-model="num" />
  <!-- 
    v-model:xxx="xxx"
      xxx
      update:xxx事件
   -->
  <Son v-model:num="num" v-model:xxx="num" v-model:yyy="num" />
</template>

<script lang="ts">
import Child from "./components/Child.vue";
import Son from "./components/Son.vue";

export default {
  name: "App",
  components: {
    Child,
    Son,
  },
  data() {
    return {
      num: 0,
    };
  },
};
</script>

<style>
.title {
  color: red;
}
</style>
